const get_list_top = async () => {
    try {
        const banner = document.querySelector('.banner');
        const Line__title = document.querySelector('.Line__title')
        const price_box = document.querySelector('.price_box')
        const packageScroller__package_right_scroll = document.querySelector('.packageScroller__package_right_scroll')
        const ScrollX = document.querySelector('.ScrollX')
        const LineEnrolment2 = document.querySelector('.LineEnrolment2')
        const comment__head = document.querySelector('.comment__head')
        const comment__tags = document.querySelector('.comment__tags')
        const box__scroll = document.querySelector('.box__scroll')
        const Line__discuss = document.querySelector('.Line__discuss')
        const packageScroller__package_left = document.querySelector('.packageScroller__package_left')
        const detail__container = document.querySelector('.detail__container')
        const Line__location__box = document.querySelector('.Line__location__box')

        const res1 = await fetch(`https://m.youxiake.com/api/m/product/lines/status?pid=` + window.location.search.split('=')[1]);
        const data1 = await res1.json();
        // title
        document.title = `${data1.data.Ptitle} `

        Line__title.innerHTML += `
            <div class="title_pname">
                <span>爆品</span>
                ${data1.data.Ptitle} 
            </div>
            <div class="title_sname">${data1.data.Pdesc}</div>
        `
        //成人价格
        price_box.innerHTML += `
            <div>
                <span>￥</span>
                <b>${data1.data.Price}</b>
                <span class="price_intro">起/成人</span>
            </div>
        `
        // 小图片
        const res2 = await fetch(`https://m.youxiake.com/api/m/product/detail?pid=` + window.location.search.split('=')[1] + `&spm=eyJmcm9tIjoiODU3Iiwib3JpZ2luYWxfaWQiOjB9&oid=0`);
        const data2 = await res2.json();
        let imglist = '';
        data2.data.product.flash_pic.forEach((item, index) => {
            imglist += `
                <div class="img_background" style="${index == 0 ? 'border: 1px solid #fff100;' : ''}">
                    <img class="pic_smail" src="${item}">
                </div>
            `

        });

        //儿童价格
        price_box.innerHTML += `
            <div>
                <span>￥</span>
                <b>${data2.data.batches_list[0].price}</b>
                <span class="price_intro">起/儿童</span>
            </div>
        `

        //banner__type
        let banner__type = ''
        data2.data.product.product_cate_type.forEach(item => {
            banner__type += `
                <div>${item + ' · '} </div>
            `
        })
        banner.innerHTML += `
            <div class="banner_back" onclick="back()"></div>
            <div class="banner_user" onclick="jump()"></div>
            <div class="banner__type">
                ${banner__type}
                ${data2.data.product.daysLabel}
            </div>
            <img class="pic_big" src=${data2.data.product.flash_pic[0]}>
            <div class="thumbnail_bg"></div>
        `
        // 大图片
        banner.innerHTML += `
            <div class="thumbnail">
                <div class="thumbnail_items">${imglist}</div>
                <div class="thumbnail_right">
                <div class="thumbnail_text">
                    <p> ${data2.data.relatedDiscover.subTitle} </p>
                    <p>${data2.data.relatedDiscover.title}</p>
                </div>
                <img src="https://m.youxiake.com/20250829115902/img/thumbnail_icon.d151c429.png" alt="">
                </div>
            </div>
        `;

        //主图片
        if (data2.data.product.flash_pic[0]) {
            banner.style.backgroundImage = `url('${data2.data.product.flash_pic[0]}')`;
        }
        // 实现切换图片
        const thumbnailItems = document.querySelector('.thumbnail_items');
        if (thumbnailItems) {
            thumbnailItems.addEventListener('click', get_img);
        }
        //title__liangdian
        let title__liangdian = ''
        data2.data.product.liangdian.forEach(item => {
            title__liangdian += `
                <div>${item}</div>
            `
        })
        Line__location__box.innerHTML = `
            <div class="Line__location__left">
                ${title__liangdian}
            </div>
            <span class="location__people"> 190人参加过 </span>
        `

        // 选择团期
        // console.log(data2)
        data2.data.dateList.forEach((item, index) => {
            if (item.starttime == '' && item.endtime == '') {
                ScrollX.innerHTML += `
                    <div class="LinePackage__item__year">
                        <span>2026<span>
                        <span>年<span>
                    </div>
                `
            } else {
                ScrollX.innerHTML += `
                    <div class="LinePackage__scroll__item">
                        <div>
                            <div class="ellipsis">
                                <span>${item.batchLabel}</span>
                            </div>
                            <div class="LinePackage__item__date">
                                <div class="star_time">${item.month + '/' + item.day}</div>
                                <div class="week">(${item.week})</div>
                                <div class="end_time">-${item.endtime}</div>
                            </div>
                            <div class="LinePackage__scroll__item_price">
                                ￥${item.price}
                            </div>
                        </div>
                        <div class="insure">
                            ${item.cornerTip}
                        </div>
                    </div>
                `
            }
            const LinePackage__scroll__item = document.querySelector('.LinePackage__scroll__item')
            const insure = document.querySelector('.insure')

            if (index == 0) {
                LinePackage__scroll__item.style.backgroundColor = 'rgba(255, 241, 0, .08)'
                LinePackage__scroll__item.style.border = '0.05rem solid #fff100'
                insure.style.color = '#fff'
                insure.style.backgroundColor = '#ff7100'
            }
        });
        // 报名
        let img_avatar = [];
        // 遍历 dateList，收集最多 3 张图片的 HTML
        for (let i = 0; i < data2.data.dateList.length; i++) {
            // 遍历当前 dateList 项的 avatarList（最多取3张）
            for (let j = 0; j < data2.data.dateList[i].avatarList.length; j++) {
                const avatar = data2.data.dateList[i].avatarList[j];
                // 只添加非 null/undefined 的图片，且数组长度不超过 3
                if (avatar != null && img_avatar.length < 3) {
                    img_avatar.push(`<img src="${avatar}" alt="">`);
                }
                // 达到 3 张后直接退出所有循环，避免多余计算
                if (img_avatar.length === 3) break;
            }
            if (img_avatar.length === 3) break;
        }

        if (data2.data.dateList[0].memberCount == 0) {
            LineEnrolment2.innerHTML = `
                <div class="LineEnrolment__left">
                    <img src="https://m.youxiake.com/20250829162859/img/face.ec732452.png" alt="">
                        ${data2.data.dateList[0].batchLimitDesc}
                </div>
            `
        } else {
            LineEnrolment2.innerHTML = `
                <div class="LineEnrolment__left">
                    <img src="https://m.youxiake.com/20250829162859/img/face.ec732452.png" alt="">
                        ${data2.data.dateList[0].batchLimitDesc}
                </div>
                <div class="LineEnrolment__right">
                    ${img_avatar[0] || ''}
                    ${img_avatar[1] || ''}
                    ${img_avatar[2] || ''}
                    <div class="LineEnrolment__avatars">${data2.data.dateList[0].memberCount}人已报名</div>
                    <img class="LineEnrolment__avatars——jiantopu"
                        src="https://m.youxiake.com/20250829162859/img/img42.c68ead15.png" alt="">
                </div>
            `
        }

        //评论tags
        comment__head.innerHTML = `
            <div class="comment__head__bold">用户评价(${data2.data.comment.pj_num})
                <div class="comment_user">${data2.data.comment.goodSubtitle}</div>
            </div>
            <div class="comment_all">
                <span>全部</span>
                <img src="https://m.youxiake.com/20250829162859/img/img42.c68ead15.png" alt="">
            </div>
        `

        data2.data.comment.tags.forEach(item => {
            comment__tags.innerHTML += `
                <div class="tags_item">${item.tname}</div>
            `
        })
        //用户评论
        data2.data.comment.lineContentList.forEach(item => {
            //生成带唯一标识的评论容器
            const commentId = `comment-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
            box__scroll.innerHTML += `
                <div class="great__comment">
                    <div class="comment__left">
                        <div class="comment__avatar">
                            <img src="${item.avatar}" alt="${item.username}的头像">
                        </div>
                        <div class="comment__left_inner">
                            <div class="left__user">
                                ${item.username}
                                <span class="level__label">${item.yxkLevelLabel || ''}</span>
                            </div>
                            <div class="left__comment">
                                ${item.comment || '暂无评论内容'}
                            </div>
                        </div>
                    </div>
                    <div class="comment__right" id="${commentId}"></div>
                </div>
            `;

            const currentCommentRight = document.getElementById(commentId);
            if (currentCommentRight && item.img) {
                currentCommentRight.style.backgroundImage = `url("${item.img}")`;;
            } else if (currentCommentRight) {
                currentCommentRight.style.backgroundColor = '#f5f5f5';
            }
        });
        //咨询
        let discuss_inner = ''
        data2.data.discuss.commentList.forEach((item) => {
            discuss_inner += `
                <div class="discuss__box__item">
                    <img src="https://m.youxiake.com/20250829162859/img/img17.b5fcf354.png" alt="">
                    <div class="item_content">${item.content}</div>
                    <span class="item_num">${item.subNum}个回答</span>
                </div>
            `
        })
        Line__discuss.innerHTML = `
            <div class="discuss__head">
                <div>${data2.data.discuss.answerNum > 0 ? `咨询(${data2.data.discuss.answerNum})` : '暂无咨询'}</div>
                <b>
                    去咨询
                    <img src="https://m.youxiake.com/20250829162859/img/img42.c68ead15.png" alt="">
                </b>
            </div>
            ${discuss_inner}
        `


        const res3 = await fetch(`https://m.youxiake.com/api/m/product/lines/detail?pid=` + window.location.search.split('=')[1] + `&did=` + data2.data.dailyPkgList[0].dailyPkgId + `&oid=0`);
        const data3 = await res3.json();
        // 选择套餐
        packageScroller__package_left.innerHTML = `
            <span>${data3.data.dailyList.length}</span>
            <span>个</span>
            <span>套</span>
            <span>餐</span>
        `
        for (let i = 0; i < data3.data.dailyList.length; i++) {

        }
        data3.data.dailyList.forEach((item, index) => {
            packageScroller__package_right_scroll.innerHTML += `
                <div class="packageScroller__package_right">
                    <p>${item.pkgname}</p>
                    <div class="packageScroller__package_right_intro">
                        <div class="day">天数</div>
                        <span class="day_span">${data3.data.days}</span>
                        <div class="go">出发</div>
                        <span class="go_span">${data3.data.jiesanPlace}集合</span>
                    </div>
                </div>
            `
            const packageScroller__package_right = document.querySelector('.packageScroller__package_right')
            if (index == 0) {
                packageScroller__package_right.style.backgroundColor = "rgba(255, 241, 0, .08)"
                packageScroller__package_right.style.border = '0.05rem solid #fff100'
            }
        })
        //intro_img
        data3.data.featureImages.forEach(item => {
            detail__container.innerHTML += `
                <img class="intro_img" src="${item.imgUrl}" alt="">
            `
        })
    } catch (err) {
        console.log('请求错误：', err);
    }
};

// banner图片切换
function get_img(event) {
    const target = event?.target;
    if (!target || target.tagName !== 'IMG') return;
    const picSmail = document.querySelectorAll('.pic_smail');
    const picBig = document.querySelector('.pic_big');
    const banner = document.querySelector('.banner');

    picSmail.forEach(item => {
        item.parentNode.style.border = '1px solid transparent';
    });

    const src = target.getAttribute('src');
    picBig.setAttribute('src', src);
    banner.style.backgroundImage = `url('${src}')`;

    target.parentNode.style.border = '1px solid #fff100';
}

get_list_top();

function back() {
    window.history.back()
}
function jump() {
    window.location.href = 'personal.html'
}

